<template>
  <div id="right-tool-window" :style="{width: tool.rightWidth + 'px'}">
    <div class="right-tool-window-body">
      <div id="left-tool-header">
        <slot>

        </slot>
      </div>
      <div class="right-tool-window-body">
        <keep-alive>
          <component :is="tool.ctx.component"></component>
        </keep-alive>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {useRightToolStore} from "../../../../store/rightTool";

const tool = useRightToolStore()


</script>

<style scoped>
.right-tool-window-body {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

#right-tool-window {
  overflow: auto;
}
</style>